body{
    margin: 0;
    padding: 0;
    background: #333;
    font-family: sans-serif;
}
.container{
    width: 1200px;
    margin: 20px auto;
    columns: 4;
    column-gap: 20px;
    -moz-column-gap:20px; /* Firefox */
    -webkit-column-gap:20px; /* Safari and Chrome */
}
.container .item{
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
    break-inside: avoid;
}
.container .item img{
    width: 100%;
}
.container .item h2{
    margin: 10px 0 10px 0;
    padding: 0px;
    font-size: 20px;
}
.container .item p{
    margin: 0;
    padding: 0 0 10px;
    font-size: 16px;
}
@media (max-width:1200px){
    .container{
        columns: 3;
        width: calc(100% - 40px);
        box-sizing: border-box;
        padding: 20px 20px 20px 20px;
    }
}
@media (max-width:760px){
    .container{
        columns: 2;
    }
}
@media (max-width:480px){
    .container{
        columns: 1;
    }
}
